<template>
    <div class="login-box">
        <div class="box-title">
            <p>登 录</p>
        </div>
        <div class="input-box">
            <transition name="el-fade-in-linear">
                <div v-show="showUserNameTip" class="username-placeholder">用户名/邮箱</div>
            </transition>
            <input v-model="username" type="text" placeholder="手机号/邮箱">
        </div>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <div style="width: 80%">
            <el-row type="flex" align="middle">
                <el-col :span="20">
                    <transition name="el-fade-in-linear">
                        <div v-show="showPasswordTip" class="password-placeholder">密码</div>
                    </transition>
                    <input v-model="password" type="password" placeholder="密码">
                </el-col>
                <el-col :span="4">
                    <el-link class="forgot-password" :underline="false" href="#">忘记密码？</el-link>
                </el-col>
            </el-row>
        </div>
        <br/>
        <div class="input-box remind-me">
            <el-checkbox v-model="rememberMe">记住我</el-checkbox>
        </div>
        <div class="button-box">
            <el-button style="width:100%;" @click="handleLogin" type="primary">登录</el-button>
        </div>
    </div>
</template>
<style scoped>
.box-title {
    font-size: 30px;
    text-align: left;

}

.forgot-password {
    position: absolute;
    display: block;
    right: 200px;

}

.remind-me {
    float: left;
}

.input-box {
    position: relative;
}

/* 设置输入框的样式为无边框且只有在输入的时候有显示下划线 */
input {
    border: none;
    outline: none;
    font-size: 28px;
    padding: 15px 0px 15px 0px;
    width: 450px;
    transition: 0.8s;
    /* 设置提示文本的样式 */
    background-color: rgba(232, 232, 232, 0);
    color: #3d4963;
    float: left;
    border-bottom: 1px solid rgb(199, 199, 199);
}

/* 设置输入框获取焦点之后的样子 */
input:focus {
    border-bottom: 1px solid #5259ff;

}

.username-placeholder {
    position: absolute;
    top: -10px;
    text-align: left;
    font-size: 13px;
    color: #bcbcbc;
}

.password-placeholder {
    position: absolute;
    top: -10px;
    text-align: left;
    font-size: 13px;
    color: #bcbcbc;
}

/* 输入文本时触发的样式 */

input::placeholder {
    color: #bcbcbc;
    font-size: 20px;
    font-weight: 100;
}

.login-box {
    position: relative;

}

.button-box {
    position: relative;
    margin-top: 100px;
    width: 70vh;
}
</style>
<script>
import loginAPI from "@/utils/login";

export default {
    emits:["callLoginSuccess"],
    data() {
        return {
            showUserNameTip: false,
            showPasswordTip: false,
            username: "",
            password: "",
            rememberMe: false
        }
    },
    watch: {
        username() {
            if (this.username == "") {
                this.showUserNameTip = false;
            } else {
                this.showUserNameTip = true;
            }
        },
        password() {
            if (this.password == "") {
                this.showPasswordTip = false;
            } else {
                this.showPasswordTip = true;
            }
        }
    },
    methods: {
        handleLogin() {
            loginAPI.login({
                account: this.username,
                password: this.password
            }, (res) => {
                if(res.code === 200){
                    this.$emit("callLoginSuccess",res.data);
                }else{
                    this.$message.error(res.msg)
                }
            })
        }
    }


}
</script>